import React, {	Component } from 'react';
import { connect } from 'dva';
import { Table, Button, Row, Col, Form, Input, InputNumber, Popconfirm, Popover, Select, TreeSelect, Modal, Icon, DatePicker } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
const {	RangePicker } = DatePicker;

@window.regStateCache
class FansManageList extends Component {

	constructor() {
		super();

	}

	handleSubmit(e, page, pageSize) {
		if(e) e.preventDefault();
		const {	fansPageSize } = this.props;
		this.props.form.validateFields((err, fieldsValue) => {
			if(err) return;
			this.props.dispatch({
				type: 'fansManage/queryFansManageList',
				payload: { ...fieldsValue,
					pageIndex: typeof page === 'number' ? page : 1,
					pageSize: pageSize || fansPageSize,
				},
			});
		});
	}

	render() {
		const p = this;
		const { form, fansList = [], fansPage, fansPageSize, fansTotal} = this.props;
		const {	getFieldDecorator,resetFields } = form;
		const formItemLayout = {
			labelCol: {	span: 10 },
			wrapperCol: { span: 14 },
		};
		const columnsList = [
			{	title: '姓名',	dataIndex: 'nickName', key: 'nickName', width: 100 },
			{	title: '头像',
			    dataIndex: 'avatarUrl', 
			    key: 'avatarUrl', 
			    width: 100,
			    render(text) {
                	if (!text) return '-';
          			const t = text;
          			return (
            			t ? <Popover title={null} content={<img src={t} style={{ width: 400 }} />}>
              			<img src={t} width={60} height={60} />
        				</Popover> : '-'
          			);
        		},
			},
			{	title: '市',	dataIndex: 'city',	key: 'city',	width: 100 },
			{	title: '省',	dataIndex: 'province', key: 'province',	width: 100 },
			{	title: '国家',	dataIndex: 'country', key: 'country',	width: 100 },
		];

		const paginationProps = {
			total: fansTotal,
		    current: fansPage,
		    pageSize: fansPageSize,
		    showSizeChanger: true,
		    onChange(pageIndex) {
		       p.handleSubmit(null, pageIndex);
		    },
		    pageSizeOptions: ['20', '50', '100', '200', '500'],
		    onShowSizeChange(current, size) {
		       p.handleSubmit(null, 1, size);
		    },
		};

		return(
		<div>
        <div className="refresh-btn"><Button type="ghost" size="small" onClick={this._refreshData.bind(this)}>刷新</Button></div>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Row gutter={20} style={{ width: 800 }}>
            <Col span="8">
              <FormItem
                label="姓名"
                {...formItemLayout}
              >
                {getFieldDecorator('nickName', {})(
                  <Input placeholder="姓名" />)}
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginLeft: 13 }}>
            <Col className="listBtnGroup">
              <Button htmlType="submit" size="large" type="primary">查询</Button>
              <Button size="large" type="ghost" onClick={() => { resetFields(); }}>清空</Button>
            </Col>
          </Row>
          <Row className="operBtn">
          </Row>
        </Form>
        <Row>
          <Col>
            <Table
              columns={columnsList}
              dataSource={fansList}
              bordered
              rowKey={record => record.id}
              pagination={paginationProps}
              size="large"
              scroll={{ y: 640, x: 300 }} 
            />
          </Col>
         </Row>
      </div>
		);
	}
}

function mapStateToProps(state) {
	const {fansList, fansPage, fansPageSize, fansTotal} = state.fansManage;
	return { fansList, fansPage, fansPageSize, fansTotal};
}

export default connect(mapStateToProps)(Form.create()(FansManageList));